<template>
    <el-form
        :model="login" 
        status-icon 
        :rules="rules" 
        ref="ruleForm" 
        label-width="100px" 
    >   
        <el-form-item label="手机号码" prop="mobile">
            <el-input type="text" v-model="login.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="login.pass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="登录身份" prop="rolltype">
            <el-radio v-model="login.rolltype"  label="1">学生身份</el-radio>
            <el-radio v-model="login.rolltype"  label="2">讲师身份</el-radio>
        </el-form-item>
        <el-form-item label="验证码" prop="security"  >
          <el-col :span="11">
        <el-input type="text" v-model="login.security" auto-complete="off"  ></el-input>
          </el-col>
          <el-col :span="11">
        <div @click="changeCode()">
          <identify :identifyCode="identifyCode" @click="changeCode()"></identify>
        </div>
          </el-col>
       </el-form-item>
        <el-form-item>
            <el-button  class="btn-width" type="primary"  @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import {validate} from "@/utils"
import {bus } from "@/utils/bus"
import identify  from '@/components/yan.vue'
export default {
    data(){
        return {
             passWord: '123456',
                // 验证码初始值
                identifyCode: '1234',
                // 验证码的随机取值范围
                identifyCodes: '1234567890',
            rules:{  //正则 
                     security: [
                        {
                            required: true,
                            message: "请输入验证码",
                            trigger: "blur",
                        },
                        {
                            validator: (rule, value, callback) => {
                                console.log(value);
                                console.log(this.identifyCode);
                            if (value!= this.identifyCode) {
                                callback(new Error("验证码不正确"));
                            } else {
                                callback();
                            }
                            },
                            trigger: "blur",
                        },
                        ],
                mobile:[
                    {
                        required:true,
                        message:"请输入你的手机号码",
                        trigger:'blur'
                    },
                    {
                        validator:(rule, value, callback)=>{
                           
                            if(validate.mobile.test(value)){
                                callback();
                            }else{
                                callback(new Error("请输入正确的手机号码"));
                            }
                        }
                        ,trigger:'blur'
                    }
                ],
                pass:[
                    {
                        required:true,
                        message:"请输入你的密码",
                        trigger:'blur'
                    },
                    {
                        validator:(rule, value, callback)=>{
                            if(value.length<4){
                                callback(new Error('密码不能少于4位'));
                            }else if(value.length>12){
                                callback(new Error('密码不能大于12位'));
                            }else{
                                callback();
                            }
                        },trigger:'blur'
                    }
                ],
                rolltype:[
                    {
                        required:true,
                        message:"请选择你的身份类别",
                        trigger:'change'
                    }
                ]
                
            },
            login:{
                rolltype:"1",
            }
        }
    },
     components:{
        identify
     },

     mounted(){
        bus.$on("sendMobile",mobile=>{
            console.log(mobile);
            // this.login.mobile = mobile;  this.login =  {}
            this.login = {...this.login,mobile:mobile} // [...[] ]  {...{}}
        });
        this.login = {...this.login,mobile:localStorage.mobile,pass:localStorage.pass};

        
       
        // 刷新页面就生成随机验证码
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
 
    },
    

    methods:{

                // 点击验证码刷新验证码
            changeCode () {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
            },
            // 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
            randomNum (min, max) {
            max = max + 1
            return Math.floor(Math.random() * (max - min) + min)
            },
            // 随机生成验证码字符串
            makeCode (data, len) {
            for (let i = 0; i < len; i++) {
                this.identifyCode += data[this.randomNum(0, data.length - 1)]
            }
            },
        

        submitForm(formname){
            this.$refs[formname].validate(valid=>{
                if(valid){
                    console.log(valid);
                    console.log(this.login)
                    // 请求ajax 
                   this.$axios.post("/vue/signin",this.login)
                    .then(res=>{
                        console.log(res)
                        // 跳转页面
                        sessionStorage.token = res.data.token;  // 前端把token 存储到本地 
                        localStorage.mobile = this.login.mobile;
                        localStorage.pass = this.login.pass;
                        localStorage.rolltype = this.login.rolltype;
                        // this.$router.push({name:"main"})
                         this.$router.push({path:this.login.rolltype=='1'?'/main/stuhome':'/main/teacherhome'})
                    })
                }else{
                    location.reload(); 
                    console.log('error submit!!');
                    this.$message.error("请先完善信息...")
                    
                    
                    return false;
                }
            })
        }
    }
}
</script>

<style lang="scss">
.btn-width{
    width:100%;
}

</style>


